<script setup>
import axios from 'axios';
// import AddFood from './Food/AddFood.vue';
import { onMounted, reactive, ref } from 'vue';
import { showMsg,showDialog } from '@/views/Util';
import { useRouter,RouterLink } from 'vue-router';
let optype = ref('new');
let title = ref('添加学生');
let router=useRouter();
// 存储食物列表数据的响应式数据
let list = ref([]);

// 获取数据的函数
function getData() {
    axios.get('/api/food_list').then(res => {
        console.log(res);
        if (res.data.status === 200) {
            list.value = res.data.data;
        } else {
            showMsg("获取数据失败", 'error', 2000);
        }
    })
}
function startRotation() {
  const lottery = document.getElementById('lottery-btn');
            lottery.style.animationPlayState = 'running';
            
        }
  setTimeout(()=>{
    const lottery = document.getElementById('lottery-btn');
    lottery.style.animationPlayState = 'paused';
              
            
},5000)
onMounted(() => {
    getData();
});

function newStudent(){
    addshow.value=false;
    getData();
}
function del(id){
    showDialog({msg:'确认删除?'}).then(res=>{
        axios.delete('/api/food_delete/'+id).then(res=>{
        console.log(res);
        if(res.data.status==200){
            getData();
        }else{
            showMsg(res.data.msg,'info',2000);
        }
    })
    })
}

function edit(id){
    //显示表单窗口
    //显示数据到窗口
   addshow.value = true;
   //list [{},{}]
   let obj = list.value.filter(item=>item.id==id);
   console.log(obj);
   student.value = obj[0];
   optype.value = 'edit';
   title.value="修改菜单"

}
let student = ref({noddleTable:'',id:'',rice:'',spicyFood:'',otherFood:''})
let addshow=ref(false);
function news(){
    addshow.value=true;
    title.value="添加菜单";
}
</script>

<template>
    <AddFood :title="title"   :type="optype" :student="student" v-show="addshow" @submit="newStudent" @close="addshow=false"></AddFood>
    <h3>今天吃什么？</h3>
        <div class="tool">
            <!-- <button @click="news">添加</button> -->
        </div>
    <div class="box">
        <ul class="yuan" id="lottery-btn">
            <li class="item" v-for="(item, index) in list" :key="index">
                <span class="aa">{{ item.noddleTable }}<router-link to="/noddle" class="t1">noddle</router-link></span>
                <span class="a2">{{ item.rice }}<router-link to="/rice" class="t2">rice</router-link></span>
                <span class="a3">{{ item.otherFood }} <router-link to="/other" class="t3">other</router-link></span>
                <span class="a4">{{ item.spicyFood }}<router-link to="/spicy" class="t4">Spicy</router-link></span>
            </li>
        </ul>
        <div class="container"  @click="startRotation()">
           <img src="../assets/img/images/wheel-pointer.png" style="width: 80px;height: 120px;">
           
          
           

        </div>
        <!-- <span class="anniu">
                    <button @click="del(item.id)" class="ss">删除</button>
                    <button @click="edit(item.id)" class="ss">修改</button>
                </span> -->
    </div>
</template>


<style scoped>
h3 {
    font-size: 40px;
    color: transparent;
    /* 初始颜色透明，通过动画设置颜色 */
    -webkit-background-clip: text;
    /* 背景裁剪为文字形状 */
    background-clip: text;
    animation: colorChange 5s linear infinite;
    /* 调用颜色变化动画，持续5秒，线性，无限循环 */
}

@keyframes colorChange {
    0% {
        background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }

    14.28% {
        background-image: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
    }

    28.57% {
        background-image: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
    }

    42.86% {
        background-image: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
    }

    57.14% {
        background-image: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
    }

    71.43% {
        background-image: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
    }

    85.71% {
        background-image: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
    }

    100% {
        background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
}
button{
   
   width: 60px;
   height: 30px;
   font-weight: bold;
   background-color: pink;
   color: white;
   padding-top: -20px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container>.t1{
    text-decoration: none;
    position: absolute;
    top: -48%;
    left: 30%;
    
}
ul>li{
    list-style: none;
}
.yuan {
    position: relative;
   
    left: -235px;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border-radius: 50%;
    border: #ccc 2px solid;
    /* overflow: hidden; */
    width: 500px;
    height: 500px;
    background-image: conic-gradient(blue 0,blue calc(1/4*100%),white calc(1/4*100%)
    ,pink 0,pink calc(2/4*100%),white calc(2/4*100%),
    rgb(23, 165, 106) 0,rgb(20, 133, 82) calc(3/4*100%),white calc(3/4*100%),
    yellow 0,yellow calc(4/4*100%),white calc(4/4*100%));
    transform: translateX(50%);
    animation: rotatePointer 1s linear infinite;
    animation-play-state: paused;
   

}
/* 
.yuan>.item {
    width: 0;
    height: 0;
    border: 250px solid;
    border-color: orangered skyblue gold yellowgreen;
} */

.item>.aa {
   
    position: absolute;
    margin-top: 140px;
    margin-left: -100px;
    font-size: 20px;
    font-weight: bold;
    color: blue;
}
.aa>.t1{
    text-decoration: none;
    margin-left: -40px;
    opacity: 0.1;
}
.a2>.t2{
    text-decoration: none;
    margin-left: -40px;
    opacity: 0.1;
}
.a3>.t3{
    text-decoration: none;
    margin-left: -40px;
    opacity: 0.1;
}
.a4>.t4{
    text-decoration: none;
    margin-left: -40px;
    opacity: 0.1;
}
.item>.a2 {
    position: absolute;
    margin-top: 110px;
    margin-left: 120px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.item>.a3 {
    position: absolute;
    margin-top: 330px;
    margin-left: -140px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.item>.a4 {
    position: absolute;
    margin-top: 330px;
    margin-left: 90px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}
.container{
  position: absolute;
  top: 31%;
  left:49%;
  
}
@keyframes rotatePointer {
            from {
                transform: translateX(50%) rotate(0deg);
            }
            to {
                transform: translateX(50%) rotate(360deg);
            }
        }
.arrow {
    position: absolute;
    top: 200px;
    left: 500px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 120px solid #f8fafc;
}

.lottery-btn {
    position: absolute;
    top: 230px;
    left: 430px;
    width: 80px;
    height: 80px;
    
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
   
    

    &--disabled {
        color: #999;
        pointer-events: none;
    }
}
.anniu{
    display: block;
    justify-content: space-around;
    align-items: center;
}
.anniu>button{
    margin-left: 10px;
}
.anniu>button:hover{
    background-color: 	#F0FFFF ;
}
</style>